{% load my_filter %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台界面</title>
    <link rel="stylesheet" href="/static/my/css/backend/backend.css">
    <link rel="stylesheet" href="/static/my/css/reset.css">
 <meta http-equiv=Cache-Control content=no-cache/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="/static/elementui/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/my/css/match/backend_phone.css">
    {% block css %}
    {% endblock %}

</head>
<body>

<div id="app">
    <link rel="stylesheet" :href="'/static/my/css/theme/' + theme + '.css'">

    <aside>
        <div class="slogan">
            <img src="/static/my/img/me/solgan.jpg" alt="">
        </div>

        <div  id="dynamic_menu">
                 <a href="/">首页</a>
                <a href="/backend/">个人中心</a>
                <a href="/backend/edit_avatar/">修改头像</a>
            {% if request.user.is_superuser %}
               <a href="/backend/avatar_list/">添加头像</a>
               <a href="/backend/add_article/">添加文章</a>
               <a href="/backend/cover_list/">添加封面</a>
               <a href="/admin/">后台系统</a></li>
            {% endif %}
                <a href="/logout/">注销退出</a>
        </div>
    </aside>
    <main>
        {% csrf_token %}
        {% block main %}

            <div class="userinfo ">
                <div class="left">
                    <div class="avatar avatar_aside_method">
                        <img src="{{ request.user.avatar.url.url }}" alt="">
                    </div>
                </div>
                <div class="right">
                    <div class="item">
            <span>
                <b>用户名: </b>{{ request.user.username }}
            </span>
                    </div>


                    <div class="item">   <span>
                <b>注册时间: </b>{{ request.user.date_joined }}
            </span></div>
                    <div class="item">   <span>
                <b>上次登录时间: </b>{{ request.user.last_login }}
            </span></div>
                    <div class="item">    <span>

                <b>来源渠道: </b>{{ request.user.get_sign_status_display }}
            </span></div>
                    <div class="item">   <span>
                <b>账号状态: </b>{{ request.user.get_account_status_display }}
            </span></div>
                    <div class="item">   <span>
                <b>邮箱: </b>
                {% if request.user.email %}
                      {{ request.user.email }}
                {% else %}
                <a href="javascript:void(0)">绑定邮箱</a>
                {% endif %}

                </span></div>
                </div>
                <div class="theme">
                    <img v-show="theme === 'light'" src="/static/my/img/nav/light.svg" @click="setTheme('dark')">
                    <img v-show="theme === 'dark'" src="/static/my/img/nav/dark.svg" @click="setTheme('light')">
                </div>
            </div>
            <div class="action">
            <el-dialog
                        title="完善信息"
                        :visible.sync="perfect_information_dialogVisible"
                        :width="min_dialog_width"
                >
                   <div class="edit_info">
                        <div>
                            <label for="perfect_information_email">邮箱</label>
                            <el-input id="perfect_information_email" v-model="perfect_information.email"
                                      placeholder="请输入邮箱"></el-input>
                        </div>
                        <div>
                            <label for="perfect_information_code">请输入验证码</label>
                          <div class="flex send_email">  <el-input id="perfect_information_code" v-model="perfect_information.code"
                                      placeholder="请输入验证码"></el-input>
                                      <el-button @click="send_email" :disabled="perfect_information_email_disable">发送邮箱验证码</el-button>
</div>
                        </div>
                        <div>
                            <label for="perfect_information_pwd">请输入密码</label>
                            <el-input id="perfect_information_pwd" type="password" v-model="perfect_information.pwd"
                                      placeholder="请输入密码"></el-input>
                        </div>
<p>
绑定邮箱之后可以使用邮箱+密码登陆
</p>


                    </div>
                    <span slot="footer" class="dialog-footer">
                     <el-button @click="perfect_information_dialogVisible = false">取 消</el-button>
                     <el-button type="primary" :disabled="perfect_information_method_disable" @click="perfect_information_method">确 定</el-button>
                  </span>
                </el-dialog>
                <div class="item">
                    <el-button @click="perfect_information_dialogVisible =true">完善信息</el-button>
                </div>
                <div class="item">
                    <el-button type="success"><a href="/backend/edit_avatar" style="color:white;">修改头像</a></el-button>
                </div>
                <el-dialog
                        title="修改密码"
                        :visible.sync="edit_password_dialogVisible"
                        :width="min_dialog_width"
                >
                   <div class="edit_info">
                        <div>
                            <label for="edit_password_old_pwd">请输入旧密码</label>
                            <el-input id="edit_password_old_pwd" type="password" v-model="edit_password.old_pwd"
                                      placeholder="请输入旧密码"></el-input>
                        </div>
                        <div>
                            <label for="edit_password_pwd">请输入新密码</label>
                            <el-input id="edit_password_pwd" type="password" v-model="edit_password.pwd"
                                      placeholder="请输入新密码"></el-input>
                        </div>
                        <div>
                            <label for="edit_password_re_pwd">确认新密码</label>
                            <el-input id="edit_password_re_pwd"type="password" v-model="edit_password.re_pwd"
                                      placeholder="确认新密码"></el-input>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                     <el-button @click="dialogVisible = false">取 消</el-button>
                     <el-button type="primary" @click="edit_password_method">确 定</el-button>
                  </span>
                </el-dialog>
                <div class="item">
                    <el-button @click="edit_password_dialogVisible=true" type="warning">修改密码</el-button>
                </div>
                <div class="item">
                    <el-button type="danger">注销退出</el-button>
                </div>

            </div>



            {% block content %}
            {% if collect_query.count %}
              <form class="collection_all_article" method="post" action="/api/cancle_collection/">
                {% csrf_token %}
                    <p>共收藏文章{{ collect_query.count }}篇,选择[[ select_list.length ]]篇</p>

                    <div class="article_list">
                        <table class="collection_table">
                            <thead>
                            <tr>
                            <th>
                            <input type="checkbox" @click="select_all" data="{{ collect_query|get_coll_nid }}">
                            </th>

                            <th>标题</th>
                            <th>分类</th>
                            <th>标签</th>
                            <th>阅读</th>
                            <th>收藏</th>
                            <th>发布时间</th>

                            </tr>
                            </thead>

                             <tbody>

                             	{% for collect in collect_query %}
								<tr>
									<td class="select"><input type="checkbox" v-model="select_list" name="nid"
									                          value="{{ collect.nid }}"></td>
									<td><a href="/article/{{ collect.nid }}">{{ collect.title }}</a></td>
									<td>{{ collect.get_category_display }}</td>
									<td class="tags">
										{% for tag in collect.tag.all %}
											<i>{{ tag }}</i>
										{% endfor %}
									</td>
									<td>{{ collect.look_count }}</td>
									<td>{{ collect.collects_count }}</td>
									<td>{{ collect.create_date|date_humaniz }}</td>
								</tr>
							{% endfor %}


                              </tbody>

                        </table>
                    </div>
                    <input type="submit" v-show="select_list.length" value="取消收藏" class="cancel_btn">
                </form>
        {% else %}
        <p class="no_article"> 这里竟然是空的很麻烦</p>
            {% endif %} 

            {% endblock %}
        {% endblock %}


    </main>

</div>

<script src="/static/axios/axios.min.js"></script>
<script src="/static/vue/vue.js"></script>
<script src="/static/jquery/jquery.min.js"></script>
<script src="/static/elementui/index.js"></script>
{% block js %}

{% endblock %}



<script>
    axios.interceptors.request.use(request => {
        if (request.method !== 'get') {
            let csrftoken = document.querySelector('input[name="csrfmiddlewaretoken"]').value
            request.headers['X-CSRFToken'] = csrftoken
        }
        return request
    })
    axios.interceptors.response.use(
        response => {
            return response.data
        }
    )

    var vue_backend = new Vue({
        el: '#app',
                // 配置vue的模板语法
        delimiters: ["[[", "]]"],
        data: {
            main_aside_flag:true,
            //弹窗宽度
            max_dialog_width:'50%',
            min_dialog_width:'30%',
            theme:'light',
            // 是否展开添加文章的侧边栏
            add_drawer: false,
            //选中的
            add_article_activeNames: ['1'],
            // 文章的id
            category_id: '',
            // 是否上推荐
            recommend: true,
            // 是否需要密码
            pwd_active: false,
            //文章密码
            pwd: '',
            // 文章封面id
            cover_id: '',
            // 文章标题
            title: '',
            // 文章简介
            abstract: '',
            // 文章分类

            //选中的文章标签
            tags: [],
            //修改密码的探查
            edit_password_dialogVisible: false,
            // 编辑密码
            edit_password: {
                old_pwd: "",
                pwd: '',
                re_pwd: '',

            },
            edit_avatar_id:'',
            avatar_list_headers:{},
            perfect_information_dialogVisible:false,
            perfect_information:{
            email:'',
            pwd:'',
                code:'',
            },
            perfect_information_email_disable: false,
            perfect_information_method_disable: true,

            select_list:[],

        },
        created() {
            let w = $(document).width()
            if (w<850){
                setTimeout(()=>{
                $('.avatar_aside_method').click(()=>{
                        flag = this.main_aside_flag
                        if(flag){
                                 $('aside').addClass('show')
                        $('main').addClass('show')
                        }else{
                             $('aside').removeClass('show')
                        $('main').removeClass('show')
                        }
                        this.main_aside_flag = !flag

                })
                },500)
            }
            if (w>850){

            }else if(w>550){

                this.max_dialog_width = '70%'
                this.min_dialog_width = '50%'
            } else if (w >400 ) {
                this.max_dialog_width = '90%'
                this.min_dialog_width = '70%'

            }

            this.init_theme()
            let img = document.getElementById('cover_img')
            let path_dict = {
                "add_article": this.init_add_article,
                "edit_article": this.init_edit_article,
                "edit_avatar": this.init_edit_avatar,
                "cover_list": this.init_cover_list,
                "avatar_list": this.init_cover_list,
            }
            let path = location.pathname
            for (const key in path_dict) {
                let index = path.indexOf(key)
                if (index !== -1) {
                    path_dict[key](img)
                    break
                }

            }


        },
        mounted(){
        // 动态导航条 给要实现动态导航的a标签,父级添加一个ref+"dynamic_menu"
        let dynamic_menu = document.querySelector('#dynamic_menu')
        let a_list = dynamic_menu.querySelectorAll('a')
        let path = location.pathname
        for (const a of a_list){
            let a_href = a.getAttribute('href')
            if (a_href === path || a_href + '/' === path){
            a.classList.add('active')
            }
        }

        },


        methods: {
            init_theme(){
                let theme = localStorage.getItem('theme')
                if(theme){
                this.theme = theme
                }
                },
                setTheme(themeName){
                    this.theme = themeName
                    localStorage.setItem('theme',themeName)
                },
            // 公用函数
            add_edit_article() {
                return {
                    title: this.title,
                    cover_id: this.cover_id,
                    pwd: this.pwd,
                    recommend: this.recommend,
                    tags: this.tags,
                    category: this.category_id,
                    abstract: this.abstract,
                    content: editor.querySelector('.editormd-markdown-textarea').value
                }
            },
            // 添加编辑文章的回调
            add_edit_callback(res) {
                if (res.code) {
                    this.$message.error(res.msg)
                    return
                }
                this.$message.success(res.msg)
                setTimeout(() => {
                    location.href = `/article/${res.data}/`
                }, 1000)
            },
            // 添加文章的函数
            add_article() {
                console.log('111')
                let data = this.add_edit_article()
                axios.post('/api/article/', data).then(res => {
                    this.add_edit_callback(res)
                })
            },
            // 选择图片
            select_cover(val) {
                setTimeout(() => {
                    let v = document.querySelector('.article_cover input').value
                    let cover = document.getElementById('cover_img')
                    cover.src = v

                }, 1)
            },
            // 编辑文章
            edit_article(nid) {
                let data = this.add_edit_article()
                axios.put(`/api/article/${nid}/`, data).then(res => {
                    this.add_edit_callback(res)

                })
            },
            // 编辑文章初始化
            init_edit_article(img) {
                let box = document.getElementById('edit_info')
                this.title = box.getAttribute('data_title')
                this.abstract = box.getAttribute('data_abstract')
                this.cover_id = box.getAttribute('data_cover_id')
                let recomend = box.getAttribute('data_recommend')

                if (recomend === 'True') {
                    this.recommend = true
                } else {
                    this.recommend = false
                }

                let cover_url = box.getAttribute('data_cover_url')
                img.setAttribute('src', cover_url)
                let category_id = box.getAttribute('data_category')
                if (category_id !== 'None') {
                    this.category_id = category_id
                }

                this.tags = eval(box.getAttribute('data_tags'))


                let pwd = box.getAttribute('data_pwd')
                if (pwd !== 'None') {
                    this.pwd = pwd
                    this.pwd_active = true
                }
            },
            // 添加文章初始化
            init_add_article(img) {
                let cover_list = eval(img.getAttribute('data'))
                let item = cover_list[Math.floor(Math.random() * cover_list.length)]
                img.setAttribute('src', item.url)
                this.cover_id = item.nid.toString()
            },
            // 修改密码
            edit_password_method() {
                axios.post(`/api/edit_password/`, this.edit_password).then(res => {
                    if (res.code){
                        this.$message.error(res.msg)
                        console.log(res)
                        $(`#edit_password_${res.self}`)[0].focus()
                        return
                    }
                    this.$message.success(res.msg)
                })
            },
            // 修改头像
            edit_avatar_method(){
              axios.put(`/api/edit_avatar/`,{
            avatar_id:this.edit_avatar_id
    }).then(res=>{

        if (res.code){
        this.$message.error(res.msg)
        return
        }
        this.$message.success(res.msg)

        $('.userinfo img').attr('src',res.data)


    })
            },
            // 初始化修改头像
            init_edit_avatar(img){
                let nid = eval($('.avatar_list').attr('avatar_nid'))

                this.edit_avatar_id = nid
            },
            // 图片upload
            avatar_list_upload(){
                let csrftoken = document.querySelector('input[name="csrfmiddlewaretoken"]').value
                this.avatar_list_headers['X-CSRFToken'] = csrftoken

            },
            //
            avatar_list_success(res){

               if (!res.code){
               return
               }
               this.$message.error(res.msg)

            },
            //  删除头像
            avatar_cover_delete(nid,url,e){
            this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',

        }).then(() => {

            axios.delete(`/api/upload/${url}/${nid}/`).then(res=>{
            if(res.code){
            this.$message.error(res.msg)
            return
            }
            $(e.target).parent().parent().remove()
            this.$message.success(res.msg)
        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
            },
            // 文章列表动态设置高度
            init_cover_list(img){

                setTimeout(()=>{
                 let avatar_list = document.querySelector('.avatar_list')
                 height = avatar_list.offsetHeight
                 height > 210 ? 210 : height
                  document.querySelector('.el-scrollbar').style.height =  height  + 'px'

                },1)

            },
            // 发送邮件
            send_email(){
            axios.post(`/api/send_email/`,this.perfect_information).then(res=>{
            if (res.code){
                this.$message.error(res.msg)
                return
            }
            this.$message.success(res.msg)
            let num = 5
            let span = document.querySelector('.send_email .el-button span')

            this.perfect_information_email_disable = true
            this.perfect_information_method_disable = false

            let timer = null
            timer = setInterval(()=>{
              span.innerHTML = num
              num--
              if (num <= 1){
              span.innerHTML = '发送邮箱验证码'
              this.perfect_information_email_disable = false
              clearInterval(timer)
              }
            },1000)

            })
            },
            // 完善信息
            perfect_information_method(){
            axios.put(`/api/perfect_information/`,this.perfect_information).then(res=>{
                if (res.code){
                this.$message.error(res.msg)
                return
                }
                this.$message.success(res.msg)
                this.perfect_information_dialogVisible = false
            })
            },
            // 选中所有
            select_all(e){
                if (this.select_all.flag){
                    this.select_list = []
                    this.select_all.flag = false
                    return
                }
                this.select_all.flag = true
                let div = e.target.getAttribute('data')
                this.select_list = eval(div)
            }

        },

    })
</script>
</body>
</html>